<?php include $this->admin_tpl('header');?>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-row hui-form-search">
            <form class="layui-form layui-col-md12" action="javascript:;" id="form_admin_search">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <input type="text" name="username" id="username" placeholder="请输入用户名" autocomplete="off"
                               class="layui-input">
                    </div>
                    <div class="layui-inline" style="width:140px;">
                        <select name="role_id" id="role_id">
                            <option value="">==请选择组别==</option>

                        </select>
                    </div>
                    <div class="layui-inline" style="width:120px;">
                        <select name="status" id="isuse">
                            <option value="">==是否启用==</option>
                            <option value="normal">已启用</option>
                            <option value="0">已禁用</option>
                        </select>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-md" data-type="reload" lay-submit="" lay-filter="search">
                            <i class="layui-icon layui-icon-search"></i>搜索
                        </button>
                        <button class="layui-btn layui-btn-danger layui-btn-md reset" type="reset">
                            <i class="layui-icon">&#xe63f;</i>清空
                        </button>
                    </div>

                </div>
            </form>
        </div>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <table id="table_list" lay-filter="table_list"></table>
    </div>
</div>
<script type="text/html" id="add_toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md"
            data-open-full="<?php echo U('admin/content/add'); ?>"
            data-title="添加文章">
        <i class="layui-icon layui-icon-add-1"></i>
        添加文章
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-md " id="batch_delete" data-title="删 除" lay-event="batch_delete">
        <i class="layui-icon layui-icon-delete"></i>
        删 除
    </button>
</script>

<script type="text/html" id="titleTpl">
    <a href="" target="_blank">
        <span class="title_color" style="color:{{d.title_color}}">
            {{d.title}}
        </span>
    </a>
    {{-d.flag_name}}
</script>
<script type="text/html" id="imageTpl">
    {{#  if(d.image !=''){ }}
    <img src="{{d.image}}" onmouseover="hui_img_preview('image2','{{d.image}}')" onmouseout="layer.closeAll();"
         id="image2" width="40">
    {{#  } }}
</script>

<script type="text/html" id="statusTpl">
    {{#  if(d.status == 1){ }}
    <span class="layui-badge layui-bg-green"> 已发布 </span>
    {{#  } else { }}
    <span class="layui-badge layui-bg-danger"> 未发布 </span>
    {{#  } }}
</script>

<script type="text/html" id="barDemo">
    <button class="pear-btn pear-btn-primary pear-btn-sm" title="编辑"
            data-open-full="<?php echo U('admin/content/edit'); ?>?id={{d.id}}"
            data-title="编辑">
        <i class="layui-icon layui-icon-edit"></i>
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" title="删除"
            data-delete="<?php echo U('admin/content/delete'); ?>?id={{d.id}}"
            data-title="您确定要放入回收站吗？" data-reload="2">
        <i class="layui-icon layui-icon-delete"></i>
    </button>
</script>

<?php include $this->admin_tpl('footer');?>
<script>
  layui.use(['table', 'jquery', 'drawer'], function () {
    var $ = layui.jquery;
    var table = layui.table;
    table.render({
      elem: '#table_list'
      , toolbar: '#add_toolbar'
      , defaultToolbar: [{
        layEvent: 'refresh',
        icon: 'layui-icon-refresh',
        title: '刷新'
      }, 'filter', 'exports']
      , method: 'get'
      , url: "<?php echo U('admin/content/init'); ?>"
      , cellMinWidth: 100
      , cols: [[
        {type: 'checkbox', LAY_CHECKED: false}
        , {field: 'id', title: 'ID', width: 60, align: 'center', sort: true}
        , {field: 'title', title: '标题', minWidth: 160, templet: '#titleTpl'}
        , {field: 'parent_name', title: '所属组别', align: 'center', width: 120}
        , {field: 'image', title: '封面图', width: 100, align: 'center', templet: '#imageTpl'}
        , {field: 'click', title: '点击量', width: 100, align: 'center', sort: true}
        , {field: 'update_time', title: '更新时间', width: 170, align: 'center', sort: true}
        , {field: 'status', title: '状态', templet: '#statusTpl', align: 'center', width: 80, sort: true}
        , {fixed: 'right', title: '操作', toolbar: '#barDemo', align: 'center', width: 130}
      ]]
      , id: 'testReload'
      , page: true
      , limit: 10
    });
    var $ = layui.$, active = {
      reload: function () {
        //执行重载
        table.reload('testReload', {
          page: {curr: 1},
          where: {
            key: {
              username: $('#username').val(),
              nickname: $('#nickname').val(),
              role_id: $('#role_id').val(),
              status: $('#isuse').val(),
            }
          }
        });
      }
    };
    //监听排序
    table.on('sort(table_list)', function (obj) {
      table.reload('testReload', {
        initSort: obj
        , where: {
          field: obj.field
          , order: obj.type
        }
      });
    });

    $('.hui-form-search .layui-btn').on('click', function () {
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
    $('.hui-form-search .reset').on('click', function () {
      window.location.reload();
    });

    //监听行工具事件
    table.on('toolbar(table_list)', function (obj) {
      var checkStatus = table.checkStatus('testReload');
      var length = checkStatus.data.length
      if (length < 1) {
        layer.msg("请先选择数据", {icon: 2});
        return false;
      }
      switch (obj.event) {
        case 'batch_delete':
          let ids = table_get_ids(obj, table, "testReload");
          var url = "<?php echo U('admin/content/delete'); ?>";
          var msg = "确定要删除" + length + "条数据吗？删除后请到回收站中查看";
          layer.confirm(msg, {skin: 'skin-layer-hui'}, function (index) {
            var loading = layer.load(0);
            ajaxData(url, 'POST', {id: ids}, 1, loading);
          })
          break;
      }
    });

  });
</script>
</body>
</html>
